<template>
  <!-- 平台优势 -->
  <div class="trans-bar content ys_bg ">
    <div class="ysinfo_temp">
      <div class="down_infotitle">
        <div class="terrace_tips">
          <p>星空交易全球站，近24小时成交量 <em>{{TransAllData|NumFormat}}</em> 美元</p>
					<p class="do_title">为全球超过130个国家的数千万用户提供安全、可信赖的数字资产交易及资产管理服务</p>
        </div> 
      </div>
      <div class="m-top-40">
				<el-row type="flex" class="row-bg" justify="space-between">
					<el-col :span="8" v-for="(item,index) in bottomData" :key="index" :md="8" :lg="8">
						<div class="infodata_box" >
							<div  class="info_both">
								<div class="img_back">
									<img :src="item.imgs" alt="" srcset="">
								</div>
								<h3>{{item.title}}</h3>
								<p>{{item.info}}</p>
								<p>{{item.pinfo}}</p>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
    </div>
  </div>
</template>
<script>
// import newsModel from "@/model/newsModel.js";
// import VueQr from "vue-qr";
export default {
	name: "home-trans",
	components: { },
  data() {
    return {
			TransAllData:'',
			bottomData:[
				{imgs:require("../../assets/images/home/a11.png"),title:'高流动性',info:'全球化交易所无国界',pinfo:'范围广 高流动',},
				{imgs:require("../../assets/images/home/a12.png"),title:'系统可靠',info:'专业级高速撮合引擎GSLB',pinfo:'分布式集群技术',},
				{imgs:require("../../assets/images/home/a13.png"),title:'专属服务',info:'7*24小時在线客服',pinfo:'VIP大客户经理私人定制',},
			],
            bottomDataTwo:[
				{imgs:require("../../assets/images/home/Advantage_Default_04.png"),title:'多元化',info:'提供币币交易、承兑交易',pinfo:'陆续开放多元化交易',},
				{imgs:require("../../assets/images/home/Advantage_Default_05.png"),title:'安全保障',info:'冷存储，SSL，多重加密',pinfo:'银行级别安全技术',},
				{imgs:require("../../assets/images/home/Advantage_Default_06.png"),title:'方便快捷',info:'用户至上，响应快速及时',pinfo:'高水准用户体验',},
			],
    };
	},
	filters: {
		// NumFormat(){
		// Vue.filter('NumFormat', function(value) {
		NumFormat: (value) => {		
		if(!value) return '0.00';
			var intPart = Number(value).toFixed(0); //获取整数部分
			var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
			var floatPart = ".00"; //预定义小数部分
			var value2Array = value.split(".");
			//=2表示数据有小数位
			if(value2Array.length == 2) {
				floatPart = value2Array[1].toString(); //拿到小数部分
				if(floatPart.length == 1) { //补0,实际上用不着
					return intPartFormat + "." + floatPart + '0';
				} else {
					return intPartFormat + "." + floatPart;
				}
			} else {
				return intPartFormat + floatPart;
			}
		}
	},
  mounted() {
		if (this.qrcode) return false;
    this.$bus.on("qrCodeLoad", url => {
      url && (this.qrcode = url);
		});
		this.volume();
  },
  methods: {
		test(dataUrl,id){
        console.log(url, id)
		},
		volume(){
      this.request(this.api.volume).then(res => {
        if (res.code == "0") {
          this.TransAllData = res.data[0].volume || "";
        } else {
          this.errMsg(res.msg || "操作失败");
        }
      });
    },
	}
};
</script>
<style lang="scss" scoped>

.terrace_tips {
  text-align: center;
  padding-top: 0px;
  margin-bottom: 60px;
  p {
    height: 40px;
		line-height: 40px;
		font-size: 30px;
    margin-bottom: 20px;
	}
	em{
		background-image: -webkit-gradient(linear,left top,left bottom,from(#185dd3),to(#061d79));
    background-image: -o-linear-gradient(top,#185dd3,#061d79);
    background-image: linear-gradient(180deg,#185dd3,#061d79);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 5px;
    color: #185dd3;
	}
	.do_title {
		font-size: 16px;
  }
}
// infodata_box
.infodata_box{
	text-align: center;cursor: pointer;
	img{width: 78px;display: block;margin: 0 auto;}
	.img_back{width: 78px;display: block;margin: 0 auto;padding: 0px;}
	.info_both{
		width: 305px;height:270px;margin: 0 auto;transition: all 0.1s;
		text-align: center;border-radius:4px;padding:30px 15px 0 15px;
		h3{font-size:18px;line-height: 70px;color: #1c242c}
		p{color: #54748f;font-size: 14px;line-height: 20px;}
	}
	&:hover{
		.info_both{
			background:#357ce1;box-shadow: 5px 5px 10px 0 #357ce1;
			transform: translateX(-10px);
			h3{color: #ffffff;}
			p{color: #ffffff;}
		}
	}	
}
.m-top-40{margin-top: 40px;}
</style>